/* flex */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flx-align-center {
  display: flex;
  align-items: center;
}

/* clearfix */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 文字多了自动換行 */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}

/* breadcrumb-transform */
.breadcrumb-enter-active {
  transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}

/* scroll bar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-darker);
  border-radius: 20px;
}

/* nprogress */
#nprogress .bar {
  background: var(--el-color-primary) !important;
}
#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary) !important;
  border-left-color: var(--el-color-primary) !important;
}
#nprogress .peg {
  box-shadow:
    0 0 10px var(--el-color-primary),
    0 0 5px var(--el-color-primary) !important;
}

/* 外边距、内边距全局样式 */
@for $i from 0 through 100 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}
html {
  height: 100vh;
  overflow-x: hidden;
  overflow: hidden;
}

.h-fill {
  width: 100%;
}

.v-fill {
  height: 100%;
}

.fill {
  width: 100%;
  height: 100%;
}

.flex-h {
  display: flex;
  flex-direction: row;
}

.h-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.h-box.gap > div:not(:last-child) {
  margin-right: 10px;
}

.h-box-gap {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.h-box-gap > div:not(:last-child) {
  margin-right: 15px;
}

.flex-v {
  display: flex;
  flex-direction: column;
}

.flex-v.gap > div:not(:last-child) {
  margin-bottom: 10px;
}

.flex-extend {
  flex: 1;
}

.v-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v-box.gap > div:not(:last-child) {
  margin-bottom: 10px;
}

.flex-align-center {
  align-items: center;
}

.flex-self-align-end {
  align-self: flex-end;
}

.flex-self-align-center {
  align-self: center;
}

.flex-align-end {
  align-items: flex-end;
}
.flex-align-start {
  align-items: start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.bot-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.top-fixed {
  position: fixed;
  width: 100%;
  z-index: 9999;
}

.pos-real {
  position: relative;
}

.pos-abs {
  position: absolute;
}

.pos-abs-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.pos-abs-lt {
  position: absolute;
  left: 0;
  top: 0;
}

.pos-abs-rt {
  position: absolute;
  right: 0;
  top: 0;
}

.pos-abs-lb {
  position: absolute;
  left: 0;
  bottom: 0;
}

.pos-abs-rb {
  position: absolute;
  right: 0;
  bottom: 0;
}

.pos-abs-b {
  position: absolute;
  bottom: 0;
}

.pos-fixed {
  position: fixed;
}

.full-screen {
  width: 100vw;
  height: 100vh;
}

.pad-sm {
  padding: 8px;
}

.pad-base {
  padding: 15px;
}

.pad-lg {
  padding: 22.5px;
}

.mg-sm {
  margin: 8px;
}

.mg-base {
  margin: 15px;
}

.mg-lg {
  margin: 22.5px;
}

.mg-l-sm {
  margin-left: 8px;
}

.mg-r-sm {
  margin-right: 8px;
}

.mg-t-sm {
  margin-top: 8px;
}

.mg-b-sm {
  margin-bottom: 8px;
}

.mg-l-base {
  margin-left: 15px;
}

.mg-r-base {
  margin-right: 15px;
}

.mg-t-base {
  margin-top: 15px;
}

.mg-b-base {
  margin-bottom: 15px;
}

.mg-l-lg {
  margin-left: 22.5px;
}

.mg-r-lg {
  margin-right: 22.5px;
}

.mg-t-lg {
  margin-top: 22.5px;
}

.mg-b-lg {
  margin-bottom: 22.5px;
}

.pad-l-sm {
  padding-left: 8px;
}

.pad-l-xs {
  padding-left: 5px;
}

.pad-r-sm {
  padding-right: 8px;
}

.pad-t-sm {
  padding-top: 8px;
}

.pad-b-sm {
  padding-bottom: 8px;
}

.pad-l-base {
  padding-left: 15px;
}

.pad-r-base {
  padding-right: 15px;
}

.pad-t-base {
  padding-top: 15px;
}

.pad-b-base {
  padding-bottom: 15px;
}

.pad-l-lg {
  padding-left: 22.5px;
}

.pad-r-lg {
  padding-right: 22.5px;
}

.pad-t-lg {
  padding-top: 22.5px;
}

.pad-b-lg {
  padding-bottom: 22.5px;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: unset;
}

.text-ellipsis-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: unset;
}

.bg-white {
  background-color: #ffffff;
}

.text-white {
  color: #ffffff;
}

.text-gray {
  color: #aaaaaa;
}

.text-blue {
  color: #0089ff;
}

.text-xs {
  font-size: 7px;
}

.text-sm {
  font-size: 14px;
}

.text-md {
  font-size: 16px;
}

.round-corner {
  border-radius: 10px;
}

.text-bold {
  font-weight: bold;
}

.text-lighter {
  font-weight: lighter !important;
}

.scale-xs {
  transform: scale(1.2);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.h-scroll {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.v-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}

.bcg-col-28323D {
  background-color: #28323d !important;
}

.bcg-col-2A2B2D {
  background-color: #1e282f !important;
}

.bcg-col-3C3D40 {
  background-color: rgb(31, 38, 48) !important;
}

.bcg-col-232323 {
  background-color: #232323 !important;
}

.bcg-col-171E27 {
  background-color: #171e27 !important;
}

.radius-lr-none {
  border-top-left-radius: 0rpx !important;
  border-top-right-radius: 0rpx !important;
}

.mg-l-xs {
  margin-left: 5px;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.mg-r-xs {
  margin-right: 5px;
}

.col-255-96-16 {
  color: rgba(255, 96, 16, 0.05);
}

.col-222 {
  color: #222;
}

.col-aaa {
  color: #aaa;
}

.line-h {
  line-height: 1;
}
